<template>
  <span>{{ counter }}</span>
</template>

<script>
export default {
    name: 'Counter' ,
    data(){
        return {
            counter: 1 
        }
    },
    created(){
        // 通过根组件获得 emitter 对象(它是一个mitt对象)
        const x = this.$root.emitter ;
        console.log( x );
        // 注册事件监听器
        x.on( '增加' , params => {
            console.log( params );
            this.counter++;
        } );
        x.on( '减少' , params => {
            console.log( params );
            this.counter--;
        } );
    }
}
</script>

<style scoped>
span {
    display: inline-block ;
    height: 50px ;
    line-height: 50px ;
    width: 100px ;
    text-align: center ;
    font-size: 22px;
    margin: 5px ;
    border: 1px solid blue ;
    border-radius: 5px ;
    padding: 0 10px ;
    user-select: none ;
}
</style>